<template>
    <div class="login-container">
        <!-- 左侧文字区域 -->
        <div class="left-section">
            <h1>欢迎来到我们的平台</h1>
        </div>

        <!-- 右侧登录表单区域 -->
        <div class="right-section">

            <el-form ref="ruleFormRef" :model="loginForm" label-width="60px" class="login-form" status-icon>
                <h2>登录</h2>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" />
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit" style="width: 200px;">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!-- 使用 transition 包裹验证码组件 -->
    <transition name="verify" >
        <Verify v-if="enableCaptcha" @success="login" @error="loadVerify" ref="verifyRef" :mode="'pop'"
            :captchaType="captchaType" :imgSize="{ width: '330px', height: '155px' }">
        </Verify>
    </transition>
</template>

<script setup lang="ts">
import Verify from '../components/verifition/Verify.vue';
import { ref, useTemplateRef, nextTick } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton,ElMessage } from 'element-plus'
import {Userlogin,getLoginInfo} from '../api/userApi'
import { useRouter} from 'vue-router';
import { useTokenStore } from '../stores/token';
import {useUserStore} from '../stores/UserStore'
const tokenStore = useTokenStore();
const userStore=useUserStore();
const router = useRouter();
const loginForm = ref({
    username: '',
    password: ''
})

const onSubmit = async () => {
    console.log('用户名:', loginForm.value.username)
    console.log('密码:', loginForm.value.password)
    enableCaptcha.value = true;
    await nextTick();  // 等待 DOM 更新
    showVerify();
}
const enableCaptcha = ref(false)
//const verifyRef = ref<InstanceType<typeof Verify>>()
const verifyRef = useTemplateRef<InstanceType<typeof Verify>>("verifyRef")
const captchaType = ref<string>('blockPuzzle')
// 随机加载滑块/点击验证码
const loadVerify = () => {
    setTimeout(() => {
        captchaType.value = Math.random() < 0.5 ? 'blockPuzzle' : 'clickWord';
    }, 700)

}
// 显示验证码
const showVerify = () => {
    if (verifyRef.value) {
        verifyRef.value.show();
    } else {
        console.error('verifyRef is undefined');
    }
}
// 关闭验证码
const hideVerify = () => {
    verifyRef.value.closeBox()
}
const login =async () => {
    
    const res=await Userlogin(loginForm.value.username,loginForm.value.password);
    const userInfo=await getLoginInfo();
    tokenStore.setToken(res);
    userStore.setUserInfo(userInfo);
    console.log(userStore.userInfo);
    setTimeout(() => {
        ElMessage.success('登录成功');
        router.push('/home');
    }, 1000);

}
</script>

<style scoped>
/* 确保 html 和 body 占满整个视口 */
html,
body {
    height: 90%;
    margin: 0;
    padding: 0;
}

/* 设置整个页面的背景图片 */
.login-container {
    display: flex;
    height: 90vh;
    /* 使用视口高度 */
    width: 100vw;
    /* 让宽度占满整个视口 */
    background-image: url('https://img.zcool.cn/community/01237c5bf51747a80121ab5d5d9a70.jpg');
    background-size: cover;
    /* 确保图片填充整个区域并裁剪 */
    background-position: center bottom;
    /* 图片居中并靠下对齐 */
    background-repeat: no-repeat;
    /* 防止图片重复 */

}

/* 左侧区域样式 */
.left-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: bold;
}

/* 右侧区域样式 */
.right-section {
    width: 500px;
    height: 90%;
    margin-right: 100px;
    /* background-color: rgba(255, 255, 255, 0.8); */
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 表单样式 */
.login-form {
    width: 300px;
    margin-left: 10px;
    margin-right: 50px;
    height: 350px;
    max-width: 350px;
    padding: 20px;
    background-color: white;
    /* 纯白背景 */
    border-radius: 30px;
    /* 圆角样式 */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
    /* 轻微阴影效果 */
}

/* 表单输入框样式 */
.el-input {
    width: 200px;
    border-radius: 30px;

    /* 圆角样式 */
}

.el-button {
    border-radius: 8px;
    /* 圆角样式 */
}

/* 初始状态：元素在视图之外 */
.verify-enter-from {
    transform: translateY(5px);
    opacity: 0;
}

.slide-enter-active {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.5s ease-in-out;
}

/* 离开状态：元素滑出视图 */
 .slide-leave-to {
    opacity: 0;
}

.slide-leave-active {
    transition: all 0.2s ease-out;
  
} 
</style>